

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  scrollView: {
    flex: 1,
  },
  userHeader: {
    paddingHorizontal: 24,
    paddingVertical: 24,
  },
  userInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  userDetails: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatarContainer: {
    position: 'relative',
    marginRight: 16,
  },
  userAvatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    borderWidth: 2,
    borderColor: 'rgba(99, 102, 241, 0.5)',
    ...Platform.select({
      ios: {
        shadowColor: '#6366f1',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.2,
        shadowRadius: 8,
      },
      android: {
        elevation: 8,
      },
    }),
  },
  onlineIndicator: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    width: 16,
    height: 16,
    backgroundColor: '#10b981',
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#0f172a',
  },
  userTextInfo: {
    flex: 1,
  },
  userName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#6366f1',
    marginBottom: 4,
  },
  userMeta: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  departmentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  userDepartment: {
    fontSize: 14,
    color: '#d1d5db',
    marginLeft: 4,
  },
  metaSeparator: {
    fontSize: 14,
    color: '#6b7280',
    marginHorizontal: 8,
  },
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  statusDot: {
    width: 8,
    height: 8,
    backgroundColor: '#10b981',
    borderRadius: 4,
    marginRight: 4,
  },
  userStatus: {
    fontSize: 12,
    color: '#10b981',
  },
  notificationButton: {
    position: 'relative',
    padding: 8,
  },
  notificationBadge: {
    position: 'absolute',
    top: 0,
    right: 0,
    minWidth: 20,
    height: 20,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 4,
  },
  notificationBadgeText: {
    fontSize: 12,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  pendingReminderContainer: {
    marginHorizontal: 16,
    marginTop: -16,
    marginBottom: 24,
    position: 'relative',
    zIndex: 10,
  },
  pendingReminder: {
    borderRadius: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  pendingReminderGradient: {
    borderRadius: 16,
    padding: 24,
  },
  pendingReminderContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  pendingReminderLeft: {
    flex: 1,
  },
  pendingTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 4,
  },
  pendingCount: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  pendingReminderRight: {
    alignItems: 'center',
  },
  pendingNumber: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 4,
  },
  quickActionsSection: {
    paddingHorizontal: 24,
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 16,
  },
  quickActionsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  quickActionItem: {
    width: '22%',
    alignItems: 'center',
    marginBottom: 16,
  },
  quickActionIconContainer: {
    width: 64,
    height: 64,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  quickActionTitle: {
    fontSize: 12,
    color: '#d1d5db',
    textAlign: 'center',
  },
  recentApprovalsSection: {
    paddingHorizontal: 24,
    marginBottom: 24,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  viewAllButton: {
    fontSize: 14,
    color: '#6366f1',
  },
  recentApprovalsList: {
    gap: 12,
  },
  recentApprovalItem: {
    borderRadius: 12,
  },
  recentApprovalGradient: {
    borderRadius: 12,
    padding: 16,
  },
  recentApprovalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  recentApprovalTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    flex: 1,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusBadgePending: {
    backgroundColor: 'rgba(245, 158, 11, 0.2)',
  },
  statusBadgeApproved: {
    backgroundColor: 'rgba(16, 185, 129, 0.2)',
  },
  statusBadgeRejected: {
    backgroundColor: 'rgba(239, 68, 68, 0.2)',
  },
  statusBadgeText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#f59e0b',
  },
  recentApprovalFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  applicantText: {
    fontSize: 14,
    color: '#9ca3af',
  },
  timeText: {
    fontSize: 14,
    color: '#9ca3af',
  },
  approvalStatsSection: {
    paddingHorizontal: 24,
    marginBottom: 24,
  },
  approvalStatsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    gap: 16,
  },
  statCard: {
    width: '48%',
    borderRadius: 12,
    padding: 16,
  },
  statCardPending: {
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: 'rgba(245, 158, 11, 0.3)',
  },
  statCardEfficiency: {
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: 'rgba(16, 185, 129, 0.3)',
  },
  statNumber: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 4,
  },
  statNumberPending: {
    color: '#f59e0b',
  },
  statNumberEfficiency: {
    color: '#10b981',
  },
  statLabel: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  statLabelPending: {
    color: '#9ca3af',
  },
  statLabelEfficiency: {
    color: '#9ca3af',
  },
  bottomSafeArea: {
    height: 80,
  },
});

